<template>
  <div class="container">
    <div class="top">
      <div class="top-title">
        <h2>创作者认证</h2>
      </div>
    </div>
    <div class="center">
      <div class="center-explain">
        <p>说明：用户需要完成创作者认证才可以发布与编辑文章。如遇到身份证已经被占用等问题请于设置中进行申述。</p>
        <!-- 保留文本原来的样式 -->
        <pre>
尊敬的作者，感谢您在平台分享内容！为保障内容质量并遵守相关规范，请您在发布文章时注意以下事项：
  1. 内容原创性，请确保文章为原创或已获得合法授权，禁止直接复制他人内容。引用部分需明确标注来源。平台会进行原创度检测，抄袭内容将被下架或限制发布权限。
  2. 内容合规性，禁止发布违法、暴力、色情、歧视性言论或任何违反国家法律法规的内容。避免涉及敏感政治、宗教话题，不传播未经证实的谣言或误导性信息。
  3. 格式规范，标题简洁明确，避免夸张或误导性表述（如“震惊！”“必看！”等）。正文段落清晰，适当使用小标题、列表或图片增强可读性。
  4. 用户权益保护，不得泄露他人隐私（如姓名、联系方式、住址等），转载内容需隐去敏感信息。禁止任何形式的骚扰、辱骂或人身攻击。
  5. 其他建议，发布前检查错别字和语法错误，提升内容专业性。遵守平台具体分类规则（如科技类文章避免夹杂无关广告）。
如有疑问，请联系客服。违规内容将被处理，多次违规可能导致账号封禁。感谢您的理解与支持！
        </pre>
      </div>
    </div>
    <div class="bottom">
      <div class="bottom-left">
        <div class="bottom-left-title">
          <h3>实名认证</h3>
        </div>
        <div class="bottom-left-content">
          <el-input v-model="authenticationForm.realName" style="width: 300px; margin-bottom: 20px;" placeholder="请输入真实姓名" />
          <el-input v-model="authenticationForm.IDNumber" style="width: 300px" placeholder="请输入身份证号" />
        </div>
        <div class="bottom-left-bottom">
          <el-button type="primary" @click="realNameAuthentication">提交认证</el-button>
          <span>认证状态：{{authenticationStatusInformation}}</span>
        </div>
      </div>
      <div class="bottom-right">
        <div class="bottom-right-title">
          <h3>身份证认证</h3>
        </div>
        <div class="bottom-right-content">
          <div class="bottom-right-content-left">
            <h4>居民身份证正面</h4>
            <el-upload
              class="avatar-uploader"
              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </div>

          <div class="bottom-right-content-right">
            <h4>居民身份证反面</h4>
            <el-upload
              class="avatar-uploader"
              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </div>
        </div>
        <div class="bottom-right-bottom">
          <el-button type="primary">提交认证</el-button>
          <span>认证状态：{{authenticationStatusInformation}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref, reactive, defineEmits} from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
import {useRouter} from 'vue-router'

//### 变量定义 ###
const router = useRouter();
const authenticationStatusInformation = ref('无');  //认证提示消息
const authenticationForm = reactive({
  realName: "",
  IDNumber: ""
});
const emit = defineEmits(['auth-success']); //获取父组件提供的操作菜单的方法

//### 方法定义 ###
const realNameAuthentication = () => {
  //目前默认认证成功
  if(authenticationForm.realName !== "" && authenticationForm.IDNumber !== "") {
    window.localStorage.setItem('ten-seek-privilege', 'creation_article');

    emit('auth-success'); // 认证成功后通知父组件，更新菜单并选中对应菜单和路由跳转
  }
}

//### 图片上传所需 ###
const imageUrl = ref('')

const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}
</script>

<style scoped lang="scss">
.container {
  // background: red;
  display: flex;
  flex-direction: column;
  height: 85vh;

  .top {
    flex: 1;
    // background: green;

    .top-title {

      h2 {
        text-align: center;
      }
    }
  }

  .center {
    flex: 2;
    // background: greenyellow;

    .center-explain {
      pre {
        margin-top: 10px;
        font-weight: bold;
      }
    }
  }

  .bottom {
    flex: 7;
    // background: hotpink;
    display: flex;

    .bottom-left {
      // background: blue;
      flex: 4;
      display: flex;
      flex-direction: column;
      box-shadow: 0 4px 8px 0 var(--border-shadow-color), 0 6px 20px 0 var(--border-shadow-color);
      border-radius: 9px;
      margin-right: 10px;

      .bottom-left-title {
        flex: 1;
        margin-top: 20px;
        text-align: center;
      }

      .bottom-left-content {
        flex: 5;
        margin-top: 20px;
        text-align: center;
      }

      .bottom-left-bottom {
        flex: 4;
        text-align: center;
        span {
          margin-left: 120px;
        }
      }
    }

    .bottom-right {
      // background: brown;
      flex: 6;
      display: flex;
      flex-direction: column;
      box-shadow: 0 4px 8px 0 var(--border-shadow-color), 0 6px 20px 0 var(--border-shadow-color);
      border-radius: 9px;

      .bottom-right-title {
        flex: 1;
        text-align: center;
      }

      .bottom-right-content {
        flex: 7;

        display: flex;
        .bottom-right-content-left {
          flex: 5;
          text-align: center;

          // 图片上传样式开始
          .avatar-uploader .el-upload {
            border: 1px dashed var(--el-border-color);
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: var(--el-transition-duration-fast);
          }

          .avatar-uploader .el-upload:hover {
            border-color: var(--el-color-primary);
          }

          .el-icon.avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            text-align: center;
          }
          // 图片上传样式结束
        }

        .bottom-right-content-right {
          flex: 5;
          text-align: center;

          // 图片上传样式开始
          .avatar-uploader .el-upload {
            border: 1px dashed var(--el-border-color);
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: var(--el-transition-duration-fast);
          }

          .avatar-uploader .el-upload:hover {
            border-color: var(--el-color-primary);
          }

          .el-icon.avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            text-align: center;
          }
          // 图片上传样式结束
        }
      }

      .bottom-right-bottom {
        flex: 2;
        text-align: center;

        span {
          margin-left: 270px;
        }        
      }
    }
  }
}
</style>